<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="../css/common.css" />
<script src="../js/common/jquery.js"></script>
<script src="../js/common/drag.js"></script>
<script src="../js/common/angular.min.js"></script>
<script type="text/javascript" src="../js/common/common.js"></script>
<script type="text/javascript" src="../js/api.js"></script>
</head>
<body ng-app="myApp">

<div class="dqwz">
    <span>当前位置：</span>
    <span>AngularJS API</span>
</div>

<section>
    <div ng-controller="lowercaseCtrl">
        <h3>【转换字符串为小写】</h3>
        <p>大写:{{upper}}</p>
        <p>小写:{{lower}}</p>
        <!-- 查看源码开始 -->
        <div class="htmlCode">
            <span>【html源码】</span>
            <xmp ng-non-bindable>
<p>大写:{{upper}}</p>
<p>小写:{{lower}}</p>
            </xmp>
            <span>【js源码】</span>
            <xmp>
app.controller('lowercaseCtrl',function($scope){
    $scope.upper = "ZHANGMENGLEI";
    $scope.lower = angular.lowercase($scope.upper);
})
            </xmp>
            <span class="close"><a href="javascript:;">关闭</a></span>
        </div>
        <div class="viewCode">
            <span><a href="javascript:;"> >>查看源码</a></span>
        </div>
        <!-- 查看源码结束 -->
    </div>
    <div ng-controller="uppercaseCtrl">
        <h3>【转换字符串为大写】</h3>
        <p>小写:{{lower}}</p>
        <p>大写:{{upper}}</p>
        <!-- 查看源码开始 -->
        <div class="htmlCode">
            <span>【html源码】</span>
            <xmp ng-non-bindable>
<p>小写:{{lower}}</p>
<p>大写:{{upper}}</p>
            </xmp>
            <span>【js源码】</span>
            <xmp>
app.controller('uppercaseCtrl',function($scope){
    $scope.lower = "zhangmenglei";
    $scope.upper = angular.uppercase($scope.lower);
})
            </xmp>
            <span class="close"><a href="javascript:;">关闭</a></span>
        </div>
        <div class="viewCode">
            <span><a href="javascript:;"> >>查看源码</a></span>
        </div>
        <!-- 查看源码结束 -->
    </div>
    <div ng-controller="stringCtrl">
        <h3>【判断是否为字符串】</h3>
        <p>对象:{{string}}</p>
        <p>是否:{{bool}}</p>
        <p>对象:{{string2}}</p>
        <p>是否:{{bool2}}</p>
        <!-- 查看源码开始 -->
        <div class="htmlCode">
            <span>【html源码】</span>
            <xmp ng-non-bindable>
<p>对象:{{string}}</p>
<p>是否:{{bool}}</p>
<p>对象:{{string2}}</p>
<p>是否:{{bool2}}</p>
            </xmp>
            <span>【js源码】</span>
            <xmp>
app.controller('stringCtrl',function($scope){
    $scope.string = "看看是吗";
    $scope.bool = angular.isString($scope.string);
    $scope.string2 = 5;
    $scope.bool2 = angular.isString($scope.string2);
})
            </xmp>
            <span class="close"><a href="javascript:;">关闭</a></span>
        </div>
        <div class="viewCode">
            <span><a href="javascript:;"> >>查看源码</a></span>
        </div>
        <!-- 查看源码结束 -->
    </div>
    <div ng-controller="numberCtrl">
        <h3>【判断是否为数字】</h3>
        <p>对象:{{number}}</p>
        <p>是否:{{bool}}</p>
        <p>对象:{{number2}}</p>
        <p>是否:{{bool2}}</p>
        <!-- 查看源码开始 -->
        <div class="htmlCode">
            <span>【html源码】</span>
            <xmp ng-non-bindable>
<p>对象:{{number}}</p>
<p>是否:{{bool}}</p>
<p>对象:{{number2}}</p>
<p>是否:{{bool2}}</p>
            </xmp>
            <span>【js源码】</span>
            <xmp>
app.controller('numberCtrl',function($scope){
    $scope.number = "看看是吗";
    $scope.bool = angular.isNumber($scope.number);
    $scope.number2 = 5;
    $scope.bool2 = angular.isNumber($scope.number2);
})
            </xmp>
            <span class="close"><a href="javascript:;">关闭</a></span>
        </div>
        <div class="viewCode">
            <span><a href="javascript:;"> >>查看源码</a></span>
        </div>
        <!-- 查看源码结束 -->
    </div>

    <div>
        <h3>【$emit和$on向上通信】</h3>
        <div ng-controller="firstCtrl">
            <h1>取得值</h1>
            <p>显示 : {{message}}</p>
            <div ng-controller="secondCtrl">
                <h1>传递值</h1>
                <input ng-model="msg" />
                <button ng-click="handleClick(msg);">测试</button>
            </div>
         </div>
        <!-- 查看源码开始 -->
        <div class="htmlCode">
            <span>【html源码】</span>
            <xmp ng-non-bindable>
<div ng-controller="firstCtrl">
    <h1>取得值</h1>
    <p>显示 : {{message}}</p>
    <div ng-controller="secondCtrl">
        <h1>传递值</h1>
        <input ng-model="msg" />
        <button ng-click="handleClick(msg);">测试</button>
    </div>
 </div>
            </xmp>
            <span>【js源码】</span>
            <xmp>
app.controller("firstCtrl", function ($scope) {
        $scope.$on('eventName', function (event, args) {
        console.log(args);
        $scope.message = args.message;
    });
});
app.controller("secondCtrl", function ($scope) {
    $scope.handleClick = function (msg) {
        $scope.$emit('eventName', { message: msg });
    };
});
            </xmp>
            <span class="close"><a href="javascript:;">关闭</a></span>
        </div>
        <div class="viewCode">
            <span><a href="javascript:;"> >>查看源码</a></span>
        </div>
        <!-- 查看源码结束 -->
    </div>

    <div>
        <h3>【$broadcast和$on向下通信】</h3>
        <div ng-controller="firstCtrl2">
            <h1>传递值</h1>
            <input ng-model="msg" />
            <button ng-click="handleClick(msg);">测试</button>
            <div ng-controller="secondCtrl2">
                <h1>取得值</h1>
                <p>显示 : {{message}}</p>
            </div>
         </div>
        <!-- 查看源码开始 -->
        <div class="htmlCode">
            <span>【html源码】</span>
            <xmp ng-non-bindable>
<div ng-controller="firstCtrl2">
    <h1>传递值</h1>
    <input ng-model="msg" />
    <button ng-click="handleClick(msg);">测试</button>
    <div ng-controller="secondCtrl2">
        <h1>取得值</h1>
        <p>显示 : {{message}}</p>
    </div>
 </div>
            </xmp>
            <span>【js源码】</span>
            <xmp>
app.controller("firstCtrl2", function ($scope) {
    $scope.handleClick = function (msg) {
        $scope.$broadcast('eventName', { message: msg });
    };
});
app.controller("secondCtrl2", function ($scope) {
        $scope.$on('eventName', function (event, args) {
        console.log(args);
        $scope.message = args.message;
    });
});
            </xmp>
            <span class="close"><a href="javascript:;">关闭</a></span>
        </div>
        <div class="viewCode">
            <span><a href="javascript:;"> >>查看源码</a></span>
        </div>
        <!-- 查看源码结束 -->
    </div>


    <div>
        <h3>【同级通信】</h3>
        <div ng-controller="childCtrl1">
            <h4>控制器1 : {{data.name}}</h4>
            <input class="form-control" type="text" ng-model="data.name">
        </div>
        <div ng-controller="childCtrl2">
            <h4>控制器2 : {{data.name}}</h4>
            <input class="form-control" type="text" ng-model="data.name">
        </div>
        <!-- 查看源码开始 -->
        <div class="htmlCode">
            <span>【html源码】</span>
            <xmp ng-non-bindable>
<div ng-controller="childCtrl1">
    <h4>控制器1 : {{data.name}}</h4>
    <input class="form-control" type="text" ng-model="data.name">
</div>
<div ng-controller="childCtrl2">
    <h4>控制器2 : {{data.name}}</h4>
    <input class="form-control" type="text" ng-model="data.name">
</div>
            </xmp>
            <span>【js源码】</span>
            <xmp>
app.factory('Data', function(){
        return {
            name: '我们是一样的'
        };
    })
app.controller('childCtrl1', ['$scope', 'Data', function($scope, Data){
    $scope.data = Data;
}])

app.controller('childCtrl2', ['$scope', 'Data', function($scope, Data){
    $scope.data = Data;
}])
            </xmp>
            <span class="close"><a href="javascript:;">关闭</a></span>
        </div>
        <div class="viewCode">
            <span><a href="javascript:;"> >>查看源码</a></span>
        </div>
        <!-- 查看源码结束 -->
    </div>
</section>

<div class="mask_layer">
</div>

</body>
</html>